<template>
  <div id="app">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true" style="margin-bottom: 15px;"></x-header>
    <router-view/>
    <tabbar>
      <tabbar-item link="/addOrder">
        <!--<img src="./assets/setStatic.svg" slot="icon">-->
        <img src="./assets/addGoods.svg" slot="icon">
        <span slot="label">新增订单</span>
      </tabbar-item>
      <tabbar-item link="/addGoods">
        <img src="./assets/addGoods.svg" slot="icon">
        <span slot="label">新增商品</span>
      </tabbar-item>
      <tabbar-item selected link="/">
        <img src="./assets/home.svg" slot="icon">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/checkGoods">
        <img src="./assets/goods.svg" slot="icon">
        <span slot="label">查看库存</span>
      </tabbar-item>
      <tabbar-item link="/svgMap">
        <img src="./assets/chart.svg" slot="icon">
        <span slot="label">图表</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>
<!--96-1-30-->
<script>
  import { XInput, Group, XButton, Flexbox, FlexboxItem, Confirm, TransferDom, Masker, Grid, GridItem, Tabbar, TabbarItem, XHeader } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XInput,
      XButton,
      Group,
      Flexbox,
      FlexboxItem,
      Confirm,
      Masker,
      Grid,
      GridItem,
      Tabbar,
      TabbarItem,
      XHeader
    },
    name: 'app'
  }
</script>

<style>
  body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  p {
    margin: 0;
    padding: 0;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
  }
</style>
